import React, { Component } from 'react';
import { connect} from 'react-redux';
import Top from '../../component/top/top';
import FootCon from '../../component/footCon/footCon';
import { setRouterName } from '../../store/public/action';
import { setMainDetails } from '../../store/mainDetails/action'
import MdDist from './mdDist/mdDist';
import MdContet from './mdContent/mdContent'
import Loading from '../../component/loading/loading'

import axios from 'axios'
import './mainDetails.scss';

import Mock from 'mockjs'
Mock.mock('/ssd?2',{
    "thingDetails": {
            "thingTitle": "丹麦花香",
            "thingBanner": ["https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/0D/ChMkJ1on5-WILcNjAFSPmk0j7lYAAi6DQFO7XgAVI-y985.jpg",'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/06/ChMkJ1on59WAVS6qATfERjoD4Lc410.jpg','https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/0D/ChMkJ1on5-mISbtAAHPfltsuXy4AAi6DQI41usAc9-u305.jpg'],
            "thingNum": "编号Cds4445",
            "thingDisc":"运用经典的黑、白、灰三色，既沉稳又高雅，既沉静又智能，赋予了产品独特的个性美。此款产品适合搭配时尚、休闲、清新、混搭等多种家居风格。",
            "thingPrice":"553",
            "thingTag":["现代风格","北约风格","复古风格"],
            "thingContent1":"<img src='http://www.w3school.com.cn/i/eg_tulip.jpg' alt='pic' />"
        }
});


class MainDetails extends Component {
    constructor(props){
        super(props);
        this.state ={
            loading :false
        }
    }

    componentWillMount(){
        this.props.setRouterName(this.props.location.pathname, this.props.history);
        axios.get('/ssd?' + 2)
            .then(response=>{
                //console.log(response.data);
                this.props.setMainDetails(response.data)
                this.setState({
                    loading: true
                })
            })
    }
    render() {
        return (
            <div className='article'>
                <Top></Top>
                {
                    !this.state.loading
                    ? <Loading></Loading>
                    :<div><MdDist></MdDist><MdContet></MdContet></div>
                    //: <Loading></Loading>
                }

                <FootCon></FootCon>
            </div>
        )
    }

}
const mapStateToProps = (state) => {
    return {
        state: state
    }
}

const mapDispatchToProps = {
    setRouterName: setRouterName,
    setMainDetails: setMainDetails
}
export default connect(mapStateToProps,mapDispatchToProps)(MainDetails)